<template>
    <div class="search-box">
        <div class="header">
            <el-icon class="icon-back" @click="emit('update:isSearch',false)">
                <ArrowLeftBold style="width: 32px; height: 32px" />
            </el-icon>
            <el-input v-model="name" :prefix-icon="Search" class="search-input" placeholder="请输入有效内容..."></el-input>
            <button class="search-btn" @click="search">搜索</button>
        </div>
        <div class="main">
            <div class="title">
                <p>历史搜索</p>
                <div v-show="!isDelete" @click="isDelete = true">
                    <el-icon>
                        <Delete style="width: 32px;" />
                    </el-icon>
                </div>
                <div class="alldelete" v-show='isDelete'>
                    <span @click="removeHandler">全部删除</span>
                    <span>|</span>
                    <span style="color: rgb(153, 98, 26)" @click="isDelete = false">完成</span>
                </div>
            </div>
            <ul class="history">
                <li @click="againSearch(item)" class="tag" v-for="item in searchHistory" :key="(item as string)">
                    {{ item }}
                    <img v-show="isDelete" @click.stop="removeItemHandler(item)" class="close"
                        src="@/assets/img/icon_close_circle_gray1.png" alt="">
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import { Search, Delete } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'


const props = defineProps({
    HistoryName: {
        type: String,
        require: true
    }
})
const isDelete = ref<boolean>(false)
const name = ref<string>('')
const searchHistory = ref<Array<string>>([])
const emit = defineEmits<{
    (e: 'update:isSearch', isSearch: boolean): void,
    (e: 'update:name', name: string): void
}>()

const search = () => {
    // console.log(name)
    // 1、传回去name的值 存值到HistoryName上去
    // console.log(searchHistory.value)
    emit('update:isSearch', false)
    emit('update:name', name.value)
    sessionStorage.setItem((props.HistoryName) as string, JSON.stringify(name.value.trim() !== '' && !searchHistory.value.includes(name.value.trim()) ? [name.value.trim(), ...searchHistory.value] : searchHistory.value))
}

const removeHandler = () => {
    sessionStorage.removeItem((props.HistoryName) as string)
    searchHistory.value = []
}

const removeItemHandler = (removename: string) => {
    searchHistory.value.splice(searchHistory.value.findIndex(item => item === removename), 1)
    sessionStorage.setItem((props.HistoryName) as string, JSON.stringify(name.value.trim() !== '' && !searchHistory.value.includes(name.value.trim()) ? [name.value.trim(), ...searchHistory.value] : searchHistory.value))
}

const againSearch = (name:string) =>{
    emit('update:isSearch',false)
    emit('update:name',name)
}

onMounted(() => {
    searchHistory.value = JSON.parse((sessionStorage.getItem((props.HistoryName) as string)) as string) || []
})


</script>
<style scoped lang="stylus">
.search-box
    position fixed
    z-index 9999
    top 0
    left 0
    right 0
    bottom 0    
    background-color #fff
    display flex
    flex-direction column

.header
    display flex
    justify-content space-evenly
    align-items center
    padding 6px 0
    margin-bottom 12px

.search-input
    width 248px
    border-radius: 18px;
    
.search-btn
    background: linear-gradient(to right, rgb(205, 140, 57), rgb(205, 140, 57));
    border-radius: 16px;
    height: 32px;
    width: 53px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    border:0

.main
    margin-top 10px
    flex-grow 1
    padding 0 15px
    
.main p
    color: rgb(51, 51, 51);
    font-size: 15px;
    font-weight: bold;

.title
    padding 6px 0
    display flex
    justify-content space-between
    align-items center
    height 32px
    margin-bottom 8px

.history
    display flex
    flex-warp warp
    align-items center
.tag
    position relative
    border-radius 13.5px
    background-color: rgb(244, 244, 244);
    border-radius: 13.5px;
    height: 27px;
    padding 0 12px
    margin 5px
    font-size: 12px;
    line-height: 27px;

.close
    position absolute
    top 0
    right 0
    transform: translate(50%, -50%);
    width 24px
    height 24px

.alldelete
    color: rgb(153, 153, 153);
    font-size: 12px;
    line-height: 27px;
    display flex
    width 91px
    justify-content space-around



</style>